<template>
	<IndexHeader :dir-id="clickDirID" :hasClose="props.configOption.hasClose" v-model:drawer="drawer"
		v-model:page="currentPage" @move-dir="moveDir" @move-files="moveFiles"></IndexHeader>
	<FilesUpload v-if="props.configOption.hasUpload" :dir-id="clickDirID"></FilesUpload>
	<el-pagination :default-page-size="24" layout="total, prev, pager, next" :current-page="currentPage"
		:total="filesTotal" @current-change="handleCurrentChange" />

	<FileList :dir-id="clickDirID" :page="currentPage" v-model="selectedOptions"></FileList>

	<el-drawer v-model="drawer" :with-header="false" direction="rtl" append-to-body size="260px">
		<el-tree ref="treeRef" :data="treeDate" :props="{ label: 'title' }" :default-expanded-keys="[clickDirID]"
			:current-node-key="clickDirID" :expand-on-click-node="false" node-key="id" highlight-current
			@node-click="handleNodeClick">
		</el-tree>
	</el-drawer>
</template>
<script setup>
import { ref, computed, reactive, watch } from "vue";
import FileList from "@/components/file-list/file-list.vue";
import FilesUpload from "@/components/files-upload/files-upload.vue";
import IndexHeader from "./index-header.vue";
import http from "@/utils/axios";
import { ElMessage, ElMessageBox } from "element-plus";

import { storeToRefs } from "pinia";
import useDirStore from "@/stores/dir";
import useFilesStore from "@/stores/files";
const dirStore = useDirStore();
const { dirList, treeDate, dirFilesTotal } = storeToRefs(dirStore);
const filesStore = useFilesStore();
const { getDirFiles } = filesStore;
const { files } = storeToRefs(filesStore);

const props = defineProps({
	configOption: {
		type: Object,
		default(rawProps) {
			return {
				hasClose: false,
				hasUpload: true,
			}
		}
	},
	handleSuccess: {
		type: Function
	}
})
const emit = defineEmits(['insert-image'])

//当前选中的目录ID
const clickDirID = ref(0);
//当前目录信息
const clickDir = computed(() => {
	return dirList.value.find((item) => {
		return item.id === clickDirID.value*1;
	}) || {};
});
const filesTotal = computed(() => {
	return dirFilesTotal.value[clickDirID.value] || 0;
});

//当前页码
const currentPage = ref(1);
//是否打开侧边栏
const drawer = ref(false);
// 是否是移动目录
const isMoveDir = ref(false);
// 是否是移动文件
const isMoveFiles = ref(false);
// 移动文件列表
const selectedOptions = ref([]);

//取得选择文件列表
function getSelected(getId = false) {
	const filesList = filesStore.files.find(item => {
		return item.dirId === clickDirID.value*1 && item.page === currentPage.value*1
	})?.list
	const arr = [];
	if (selectedOptions.value.length < 1 || !filesList) {
		return ElMessage('没有选取文件');
	}
	selectedOptions.value.forEach(i => {
		if (getId) {
			arr.push(i)
		} else {
			const file = filesList.find(item => {
				return item.id === i
			})
			if (file) {
				arr.push(file)
			}
		}
	})
	selectedOptions.value.length = 0;
	return arr;
}
function setClickDirID(id) {
	clickDirID.value = id;
	currentPage.value = 1;
}

//移动文件夹
function moveDir() {
	isMoveDir.value = true;
	isMoveFiles.value = false;
	drawer.value = true;
}
//移动文件
function moveFiles() {
	isMoveDir.value = false;
	isMoveFiles.value = true;
	drawer.value = true;
}
//目录树被点击时
function handleNodeClick(item, node, tree, event) {
	const ids = [];
	const move_id = item.id; //选择目录
	if (!isMoveDir.value && !isMoveFiles.value) {
		//切换目录名，并将页码设置成1
		currentPage.value = 1;
		clickDirID.value = move_id;
	} else {
		drawer.value = false;
		//选择目录是自己
		if (clickDirID.value === move_id) {
			return ElMessage("不能选择自己目录");
		}

		if (isMoveDir.value) {
			isMoveDir.value = false;
			//选择目录等于当前目录的父目录也就是pid不变
			if (clickDir.value.pid === move_id) {
				return ElMessage("移动目录和当前相同");
			}
			ids.push(clickDirID.value);
			return http.post("app/pan/dir/move", { ids, move_id }).then((res) => {
				dirStore.getDirTree();
			});
		}
		if (isMoveFiles.value) {
			isMoveFiles.value = false;
			if (selectedOptions.value.length === 0) {
				return ElMessage("末选择移动文件");
			}
			ids.push(...selectedOptions.value);
			return http.post("app/pan/dir/move", { ids, move_id }).then((res) => {
				selectedOptions.value.length = 0;
				getDirFiles(
					clickDirID.value,
					{ page: currentPage.value, is_count: true },
					true
				);
				filesStore.replaceFiles({ dirId: move_id, page: 1, list: null }, true);
			});
		}
	}
}
// 切换目录
function handleCurrentChange(value) {
	currentPage.value = value;
	getDirFiles(clickDirID.value, { is_count: 1, page: value });
}

defineExpose({
	getSelected,
	setClickDirID
})
//拉取肖前目录文件
</script>
<style scoped></style>
